<template>
  <div class="greetingEdit">
    <div class="content" v-show="init">
      <div class="greetingEdit-title border-bottom">
        <i class="icon-xiangzuo" @click="backtrack"></i>
        {{btitle}}
        <span @click="_upload">保存</span>
      </div>
      <div style="height:1.5rem;"></div>
      <!--上传标签-->
      <input type="file" hidden class="upload-file" id="fileInput" ref="upload"
             @change="imgUpload($refs.upload)"
             accept="image/*">
      <div class="box" ref="greeting">
        <div class="door" @click="arousePic($refs.upload)">
          <img :src="callTemplate">
        </div>
        <div class="pic">
          <img :src="callImg" alt="">
        </div>
        <div class="info">
          <div class="blessing" v-if="imgTextClose">
            <!--<p class="b-text" @click="arouseText">自定义</p>
            <p class="b-pic" @click="arouseMap">图文素材</p>-->
            <p class="b-pic" @click="arouseMap">
              <i><img src="~common/image/2.png" alt=""></i>添加祝福语
            </p>
          </div>
          <div class="wishText" v-show="!imgTextClose">
            <p class="textContent" ref="wishText" @click="showImgText">{{textContent}}</p>
            <div class="wishImg" v-if="callText !==''">
              <img :src="callText" @click="showImgText">
            </div>
            <span class="closeImgText" v-show="closeImgText" @click="showImgText">
              <img src="~common/image/close.png" @click="hideImgText">
            </span>
          </div>
          <div class="ewm">
            <img :src="ewm">
          </div>
        </div>
      </div>
      <!--选中模板按钮-->
      <div class="showSidebar" @click="showSidebar = !showSidebar">
        <i class="icon-more"></i>
      </div>
      <div class="sidebar" v-show="showSidebar">
        <!--<div class="item border-bottom" @click="arousePic">
          <p><i class="icon-zhaopian"></i>照片</p>
        </div>-->
        <div class="item border-bottom" @click="arouseBackground">
          <p><i class="icon-huanbeijing"></i>背景</p>
        </div>
        <div class="item" @click="arouseTemplate">
          <p><i class="icon-mobanguanli"></i>模板</p>
        </div>
      </div>
      <!--素材-->
      <shadeView :imgList="imgList" :active="active" :type="imgType" v-if="showImgList" @wzhclick="confirmPitchOn"
                 @confirm="confirmText"
                 @clickHide="clickHideTemplate" :showCustom="showCustom">
        <div class="setting-title">
          <span class="setting-text">
            <span>{{title}}</span>
            <div class="wordBox border-bottom" v-show="wordBox">
              <span class="word" :class="{'active':word ==0}" @click="clickWord(0)">图文</span>
              <span :class="{'active':word ==1}" @click="clickWord(1)">自定义</span>
            </div>
          </span>
        </div>
        <span class="setting-btn" @click="clickHideTemplate" v-show="!showCustom">关闭</span>
      </shadeView>
      <!--文本输入-->
      <yd-popup v-model="showInputText" position="center" width="80%">
        <div class="setting-title border-bottom">
          <span class="setting-text">文字</span>
          <span class="setting-btn" @click="confirmText">确定</span>
        </div>
        <div class="input">
          <yd-cell-item>
            <yd-textarea class="border" v-model="textContent" slot="right" maxlength="60"></yd-textarea>
          </yd-cell-item>
        </div>
      </yd-popup>
    </div>
    <!--loading加载-->
    <Loading v-show="loading"></Loading>
    <!--初始化背景选择-->
    <shadeView :imgList="imgList" :active="active" :type="imgType" v-if="showBackground" @wzhclick="_backgroundOn"
               @clickHide="">
      <div class="setting-title border-bottom">
        <span class="setting-text">
          <span>背景</span>
        </span>
        <span class="setting-btn" @click="nextStep">下一步</span>
      </div>
    </shadeView>
    <!--初始化模板选择-->
    <shadeView :imgList="imgList" :active="active" :type="imgType" v-if="showTemplate" @wzhclick="_templateOn"
               @clickHide="">
      <div class="setting-title border-bottom">
        <span class="setting-text">
          <span>模板</span>
        </span>
        <div class="setting-span">
          <span @click="lastStep" class="lastStep">上一步</span>
          <span @click="_initEdit">下一步</span>
        </div>
      </div>
    </shadeView>

  </div>
</template>

<script>
  import shadeView from 'components/shade/mate'
  import {mapGetters, mapMutations} from 'vuex'
  import {computePV} from 'common/js/statistics'
  import {
    getCardTemplate,
    getBackgroundColor,
    getWordTemplate,
    editCardInit,
    editCard,
    ImmediateEdit
  } from 'common/js/greeting'
  import {islogin} from 'common/js/user'
  import Loading from 'components/loading/Loading'
  import {setTitle} from 'common/js/title'

  export default {
    data() {
      return {
        init: false,
        imgList: [],//素材内容
        title: '', //标题
        imgType: '',// 类型:1背景，2模板，3文字图片
        imgUrl: '',//素材url
        callImg: localStorage.getItem('callImg'),//拜年图片
        callImgId: localStorage.getItem('callImgId'),//拜年图片
        callBackground: localStorage.getItem('callBackground'),//拜年背景
        callTemplate: localStorage.getItem('callTemplate'),//拜年模板
        callText: localStorage.getItem('callText'),//拜年文字
        textTitle: localStorage.getItem('textTitle'),//文本标题
        textContent: localStorage.getItem('textContent'),//文本内容
        word: 0,//唤起文字模型
        wordBox: false,//显示图文切换
        showImgList: false, //显示编辑列表
        textList: [], //文字素材
        imgTextList: [], //图文素材
        backgroundList: [], //背景素材
        templateList: [], //模板素材
        active: '',//素材选中
        showInputText: false,//输入文字
        imgTextClose: true,//图文是否关闭
        ewm: localStorage.getItem('ewm'),// 二维码
        template_id: localStorage.getItem('template_id'),//模板id
        img_id: localStorage.getItem('img_id'),//中间图片id
        word_template: localStorage.getItem('word_template'),//祝福语id
        background_color: localStorage.getItem('background_color'),//背景色id
        closeImgText: false,//关闭文字模板开关
        showSidebar: true,//显示按钮
        btitle: localStorage.getItem('btitle'),//贺卡标题
        shadeType: '0',
        showBackground: false,//显示背景选择框
        showTemplate: false, //显示模板选择框
        showCustom: false,
        wordColor: localStorage.getItem('wordColor')
      }
    },
    computed: {
      returnTextImg() {
        var str = ``
        return str
      },
      ...mapGetters([
        'pitchOnImg',
        'pitchOnImgId',
        'initEdit',
        'greetingEditInit',
        'loading'
      ]),
    },
    beforeRouteLeave(to, from, next) {
      if (to.name !== 'picCutOut') {
        this.setInitEdit(true);
      }
      next()
    },
    mounted() {
      if (this.greetingEditInit) {
        this.setGreetingEditInit(false)
        this.$nextTick().then(() => {
          this._initBackground();
        })
      }
      this._initEdit();
    },
    methods: {
      //点击隐藏模板
      clickHideTemplate() {
        this.showImgList = false;
        this.showCustom = false;
        this.wordBox = false;
      },
      //上一步
      lastStep() {
        this.showTemplate = false;
        this._initBackground();
      },
      //下一步
      nextStep() {
        this.showBackground = false;
        this._initTemplate();
      },
      //返回放弃
      backtrack() {
        this.$dialog.confirm({
          title: '是否保存当前更改',
          mes: '',
          opts: [
            {
              txt: '保存',
              callback: () => {
                this._upload();
              }
            },
            {
              txt: '不保存',
              color: '#CCC',
              callback: () => {
                window.history.go(-1);
              }
            },
            {
              txt: '取消',
              color: true
            }
          ]
        });
      },
      //初始化模板
      _initTemplate() {
        getCardTemplate({
          "phpsid": localStorage.getItem('token'),//session_id
          "page": 1,//第几页
          "type":-1
        }).then(res => {
          if (res.status === 1) {
            this.imgList = res.data;
            this.showTemplate = true;
            this.imgType = '2'
          }
        })
      },
      //选中模板
      _templateOn(item) {
        ImmediateEdit({
          "phpsid": localStorage.getItem('token'),//session_id
          "id": this.$route.params.id,//贺卡id
          "template_id": item.id,//模板id
        }).then(res => {
          this.showTemplate = false
          this._initEdit();
          this.confirmPitchOn(item)
        })
      },
      //初始化背景
      _initBackground() {
        getBackgroundColor({
          "phpsid": localStorage.getItem('token'),//session_id
          "page": 1,//第几页
          "type":-1
        }).then(res => {
          if (res.status === 1) {
            this.imgList = res.data;
            this.showBackground = true;
            this.imgType = '1'
          }
        })
      },
      //选中背景
      _backgroundOn(item) {
        ImmediateEdit({
          "phpsid": localStorage.getItem('token'),//session_id
          "id": this.$route.params.id,//贺卡id
          "background_color": item.id,//背景id
        }).then(res => {
          this.showBackground = false
          this._initTemplate();
          this.confirmPitchOn(item);
        })
      },
      //初始化编辑页面
      _initEdit() {
        this.showTemplate = false;
        this.showBackground = false;
        //判断是否登录
        islogin().then(res => {
          if (res.status !== 1) {
            this.$dialog.alert({
              mes: '未登录，请先登录', callback: () => {
                this.$router.push('/login');
              }
            });
          } else {
            this.init = true;
          }
        })
        //是否显示初始化信息内容
        if (this.initEdit) {
          computePV({
            page_type: 9
          })
          editCardInit({
            "phpsid": localStorage.getItem('token'),//session_id
            "id": this.$route.params.id,//贺卡id
            "is_edit": 1 //0-详情页的初始化 1-编辑页的初始化
          }).then(res => {
            if (res.status === 1) {
              setTitle(res.data.btitle)
              this.btitle = res.data.btitle
              localStorage.setItem('btitle', res.data.btitle);
              //背景
              this.callBackground = res.data.backgimg.path;
              localStorage.setItem('callBackground', res.data.backgimg.path);
              this.background_color = res.data.backgimg.id;
              localStorage.setItem('background_color', res.data.backgimg.id);//背景id
              this.$refs.greeting.style.backgroundImage = 'url(' + res.data.backgimg.path + ')';
              localStorage.setItem('wordColor', res.data.word_color)
              this.wordColor = res.data.word_color
              this.$refs.wishText.style.color = res.data.word_color
              //模板
              this.callTemplate = res.data.Ctemplimg.path;
              localStorage.setItem('callTemplate', res.data.Ctemplimg.path);
              this.template_id = res.data.Ctemplimg.id;
              localStorage.setItem('template_id', res.data.Ctemplimg.id);//模板id
              //中间图片
              this.callImg = res.data.img.path
              localStorage.setItem('callImg', res.data.img.path);
              this.img_id = res.data.img.id;
              localStorage.setItem('img_id', res.data.img.id);//图片id
              //祝福文字
              this.textContent = res.data.content
              localStorage.setItem('textContent', res.data.content);
              //祝福图片
              this.callText = res.data.Wtemplimg.path;
              localStorage.setItem('callText', res.data.Wtemplimg.path);
              this.word_template = res.data.Wtemplimg.id;
              localStorage.setItem('word_template', res.data.Wtemplimg.id);//文字模板id
              //二维码
              this.ewm = res.data.Qcode_path;
              localStorage.setItem('ewm', res.data.Qcode_path);
              if (res.expand.is_pic === 3) {
                this.imgTextClose = true;
              } else {
                this.imgTextClose = false;
              }
              this.setInitEdit(false);
            } else if (res.status < 0) {
              this.$dialog.toast({
                mes: res.expand.info,
                timeout: 1000,
                icon: 'error'
              });
            } else {
              this.$dialog.alert({mes: res.msg});
            }
          }).catch(res => {
            this.$dialog.alert({mes: '网络错误，确定后刷新'});
          })
        }
        this.textContent = localStorage.getItem('textContent');
        if (localStorage.getItem('callText') !== '' || this.textContent !== '') {
          this.imgTextClose = false;
        }
        this.$refs.greeting.style.backgroundImage = 'url(' + this.callBackground + ')';
        this.$refs.wishText.style.color = this.wordColor;
        this.callImg = this.pitchOnImg;
        this.callImgId = this.pitchOnImgId;
        //初始化上传图片
        this.getUploadPic('')
      },
      //显示图文展示
      showImgText() {
        this.closeImgText = !this.closeImgText;
      },
      //上传
      _upload() {
        var imgId = ''
        if (this.pitchOnImgId == '') {
          imgId = this.img_id
        } else {
          imgId = this.pitchOnImgId
        }
        editCard({
          "phpsid": localStorage.getItem('token'),//session_id
          "id": this.$route.params.id,//贺卡id
          "template_id": this.template_id,//模板id
          "img_id": imgId,//图片id
          "content": this.textContent,//祝福语
          "word_template": this.word_template,//文字模板id
          "background_color": this.background_color//背景色id
        }).then(res => {
          if (res.status === 1) {
            var carId = ''
            if (res.data.card_id == '0') {
              carId = '-1'
            } else {
              carId = res.data.card_id;
            }
            this.$dialog.toast({
              mes: '创建成功',
              timeout: 1000,
              icon: 'success',
              callback: () => {
                this.$router.push('/greetingDetail/' + res.data.blessCard_id + '/' + carId)
              }
            });
          } else if (res.status < 0) {
            if (res.expand.type === 1) {
              this.$dialog.alert({
                mes: res.expand.info, callback: () => {
                  this.$router.push('/login')
                }
              });
            } else {
              this.$dialog.toast({
                mes: res.expand.info,
                timeout: 1000,
              });
            }
          }
        })
      },
      //隐藏图文，重新选中
      hideImgText() {
        this.imgTextClose = true;
        this.textTitle = ''
        this.textContent = ''
        this.callText = ''
        localStorage.setItem('callText', '');
        this.word_template = '';
        localStorage.setItem('word_template', '');//文字模板id
      },
      //确认文本
      confirmText(item) {
        this.showInputText = false;
        this.showImgList = false;
        this.showCustom = false;
        this.textContent = item;
        if (this.textTitle !== '' || this.textContent !== '') {
          this.imgTextClose = false;
          this.callText = ''
          localStorage.setItem('callText', '');
          localStorage.setItem('textTitle', this.textTitle);
          localStorage.setItem('textContent', this.textContent);
        }
      },
      //唤起文字
      arouseText() {
        this.showInputText = true;
      },
      //图文祝福
      clickWord(type) {
        this.active = '';
        this.imgType = '3'
        switch (type) {
          case 0:
            this.word = 0;
            /*this.word = 0;
            this.imgList = this.textList;
            this.showImgList = true;*/
            this.showCustom = false;
            break;
          case 1:
            this.showCustom = true;
            this.word = 1;
            /*this.word = 1;
            if (this.imgTextList.length) {
              this.imgList = this.imgTextList;
              this.showImgList = true;
            } else {
              getWordTemplate({
                "phpsid": localStorage.getItem('token'),//session_id
                "page": 1,//0-文字图 1-纯图
              }).then(res => {
                if (res.status === 1) {
                  this.imgTextList = res.data;
                  this.imgList = res.data;
                  this.showImgList = true;
                }
              })
            }*/
            break;
        }
      },
      //唤起祝福
      arouseMap() {
        this.title = ``;
        this.word = 0;
        this.wordBox = true;
        this.imgType = '3'
        this.shadeType = '1'
        if (this.textList.length) {
          this.imgList = this.textList;
          this.showImgList = true;
        } else {
          getWordTemplate({
            "phpsid": localStorage.getItem('token'),//session_id
            "page": 1,//0-文字图 1-纯图
            "type":-1
          }).then(res => {
            if (res.status === 1) {
              this.textList = res.data;
              this.imgList = res.data;
              this.showImgList = true;
            }
          })
        }
      },
      //唤起模板
      arouseTemplate() {
        this.title = '模板'
        this.imgType = '2'
        if (this.templateList.length) {
          this.imgList = this.templateList
          this.showImgList = true;
        } else {
          getCardTemplate({
            "phpsid": localStorage.getItem('token'),//session_id
            "page": 1,//第几页
            "type":-1
          }).then(res => {
            if (res.status === 1) {
              this.templateList = res.data;
              this.imgList = res.data;
              this.showImgList = true;
            }
          })
        }
      },
      //唤起背景
      arouseBackground() {
        this.title = '背景'
        this.imgType = '1'
        if (this.backgroundList.length) {
          this.imgList = this.backgroundList
          this.showImgList = true;
        } else {
          getBackgroundColor({
            "phpsid": localStorage.getItem('token'),//session_id
            "page": 1,
            "type":-1
          }).then(res => {
            if (res.status === 1) {
              this.backgroundList = res.data;
              this.imgList = res.data;
              this.showImgList = true;
            }
          })
        }
      },
      //选中图片上传
      imgUpload(item) {
        var file = item.files[0]
        this.blobToBase64(file,(data)=>{
          this.getUploadPic(data)
          this.$store.dispatch('showLoading');
          this.$router.push('/picCutOut');
          setTimeout(() => {
            this.$store.dispatch('hideLoading');
            this.$router.push('/picCutOut');
          }, 1000)
        })

      },
      blobToBase64(blob, callback) {
        var a = new FileReader();
        a.onload = function(e) {
          callback(e.target.result);
        }
        a.readAsDataURL(blob);
      },
      getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
          url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
          url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
          url = window.webkitURL.createObjectURL(file)
        }
        return url
      },
      //唤起照片
      arousePic(item) {
        //this.$router.push('/photoWall')
        //修改成直接唤起图片上传
        //this.$router.push('/picCutOut')
        //判断是否是苹果，如果是删除capture属性
        var ua = navigator.userAgent.toLowerCase();
        var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
        if (isIos) {
          item.removeAttribute('capture')
        }
        //点击input上传
        item.click();
      },
      pitchOn(it) { //选中
        if (this.active === '' || this.active !== it.id) {
          this.active = it.id;
          this.imgUrl = it.big_img_path;
        } else {
          this.imgUrl = '';
          this.active = '';
        }
      },
      //选中类型
      confirmPitchOn(it) {
        if (this.active === '' || this.active !== it.id) {
          this.active = it.id;
          this.imgUrl = it.big_img_path;
        } else {
          this.imgUrl = '';
          this.active = '';
        }
        this.wordBox = false;
        this.showImgList = false;
        this.shadeType = '0'
        switch (this.imgType) {
          case '1':
            if (this.imgUrl !== '') {
              this.callBackground = this.imgUrl;
              localStorage.setItem('callBackground', this.callBackground);
              this.background_color = this.active;
              localStorage.setItem('background_color', this.active);
              this.$refs.greeting.style.backgroundImage = 'url(' + this.callBackground + ')';
              this.$refs.wishText.style.color = it.word_color
            }
            this.active = ''
            this.imgUrl = ''
            break;
          case '2':
            if (this.imgUrl !== '') {
              this.callTemplate = this.imgUrl;
              localStorage.setItem('callTemplate', this.callTemplate);
              this.template_id = this.active;
              localStorage.setItem('template_id', this.template_id);
            }
            this.imgUrl = ''
            this.active = ''
            break;
          case '3':
            if (this.imgUrl !== '') {
              this.closeImgText = false;
              this.imgTextClose = false;
              this.callText = this.imgUrl;
              localStorage.setItem('callText', this.callText);
              this.word_template = this.active;
              localStorage.setItem('word_template', this.word_template);
              this.textTitle = ''
              this.textContent = ''
              localStorage.setItem('textTitle', '');
              localStorage.setItem('textContent', '');
            }
            this.imgUrl = ''
            break;
        }
      },
      ...mapMutations({
        setInitEdit: 'INNIT_EDIT',
        getUploadPic: 'UPLOAD_PIC',
        setGreetingEditInit: 'GREETING_EDIT_INIT'
      })
    },
    components: {
      shadeView,
      Loading
    }
  }
</script>


<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .greetingEdit
    height: 100%;

  .greetingEdit-title
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    line-height: 1.5rem;
    height: 1.5rem;
    text-align: center;
    font-size: .55rem;
    color: $color-title;
    background: $background;
    z-index: 99;
    i
      position: absolute;
      top: 0;
      left: .5rem;
      line-height: 1.5rem;
      font-size: .6rem;
      color: $color-l-z;
    span
      position: absolute;
      top: 0;
      right: .5rem;
      line-height: 1.5rem;
      display: inline-block;
      font-size: .44rem;

  .content
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    .box
      background-repeat: no-repeat;
      background-size: 100% 100%;
      min-height: 18.1rem;
    .door
      position: relative;
      z-index: 9;
      min-height: 13rem;
      img
        display: block;
        width: 100%;
        height: 100%;
    .pic
      position: absolute;
      top: 4.36rem;
      left: 2.02rem;
      right: 2.02rem;
      height: 9.7rem;
      overflow: hidden;
      z-index: 3;
      background-color: $background-wall;
      background-image: url('~common/image/background-add.png');
      background-repeat: no-repeat;
      background-position: center 35%;
      background-size: 2.36rem 2.63rem;
      img
        display: block;
        width: 100%;
        height: 9.7rem;
    .info
      position: absolute;
      top: 14.2rem;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem .5rem 0 .5rem;
      z-index: 99;
      .ewm
        padding: .3rem;
        img
          display: inline-block;
          width: 2.45rem;
          height: 2.45rem;
      .blessing
        width: 6.18rem;
        height: 2.78rem;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        font-size: .4rem;
        color: $color;
        img
          width: 100%;
          height: 100%;
        .b-text
          width: 3.06rem;
          text-align: center;
          line-height: 2.78rem;
          border: 1px dashed rgba(255, 255, 255, .3);
        .b-pic
          width: 100%;
          line-height: 2.78rem;
          text-align: center;
          background: $background-b-text;
          border: 1px solid rgba(255, 255, 255, .1);
          font-size: .43rem;
          i
            position: relative;
            padding-left: .7rem;
            img
              position: absolute;
              top: 0;
              left: 0;
              width: .5rem;
              height: .5rem;

      .wishText
        position: relative;
        width: 6.18rem;
        height: 2.78rem;
        color: #000;
        line-height: .7rem;
        font-size: .4rem;
        span
          display: block
          background: $background-b-text;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          img
            position: absolute;
            top: -.1rem;
            right: -.1rem;
            width: .5rem;
            height: .5rem;
            z-index: 99;
        .wishImg
          position: relative
          width: 6.18rem;
          height: 2.78rem;
          text-align: center;
          z-index: 9;
          img
            width: 100%;
            height: 100%;
        .textContent
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;

  .showSidebar
    position: fixed;
    top: 2rem;
    left: .5rem;
    background: -webkit-linear-gradient(-315deg, rgba(245, 76, 197, .9), rgba(135, 85, 240, .9));
    z-index: 99;
    height: .6rem;
    line-height .3rem;
    width: 1.24rem;
    color: $color;
    border-radius: .62rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;

  .sidebar
    position fixed;
    top: 3.2rem;
    left: 0;
    background: -webkit-linear-gradient(-315deg, rgba(245, 76, 197, .9), rgba(135, 85, 240, .9));
    z-index: 99;
    width: 1.2rem;
    text-align: center;
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem;
    .item
      color: $color;
      height: 1.8rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      font-size: .3rem;
      i
        display: block;
        width: 100%;
        font-size: .58rem;
        margin-bottom: .1rem;

  .setting-title
    position: relative;
    padding: 0 .5rem;
    font-size: .37rem;
    z-index: 9;
    .setting-text
      line-height: 1.32rem;
      color: $color-b-title;
      font-size: .43rem;
      .active
        background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    .setting-btn
      position: absolute;
      top: .4rem;
      right: .5rem;
      display: block;
      width: 1.5rem;
      height: .58rem;
      line-height: .7rem;
      color: $color;
      border-radius: .29rem;
      text-align: center;
      background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);
      z-index: 10;
    .setting-span
      position: absolute;
      top: .4rem;
      right: .5rem;
      span
        display: inline-block;
        width: 1.5rem;
        height: .58rem;
        line-height: .7rem;
        color: $color;
        border-radius: .29rem;
        text-align: center;
        background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);
      .lastStep
        background: $background;
        background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border:$border-i-a


  .input
    margin: .45rem;
    font-size: .4rem
    textarea
      padding: .3rem;
      width: 100%;

  .wordBox
    span
      padding: 0 .24rem;
    .word
      position: relative;
      border-right: 1px solid #e6e6e6 !important;
    .word:after
      content: ''
      position: absolute;
      top: 0;
      right: .24rem;
      bottom: 0;


</style>
